<template>
  <view class="page">
    <!-- 切换 -->
    <view class="content">
          <!--					自习室 / 排行榜-->
          <view class="tab-list">
            <view class="tab-item" v-for="item in tabList" :key="item" :class="{ active: currentSelectTab === item }"
              @click="() => (currentSelectTab = item)">{{ item }}</view>
          </view>
          <!--					自习室-->
          <view class="tab-page" v-if="currentSelectTab === '自习室'">
            <image :src="getShowNginxPicUrl('LB7JN8vBeEa3WmYwoLhb.png')" mode="widthFix" class="image"
              @click="() => $uni.navigateTo({ url: '/studyRoom/pages/studyRoomList/index' })"></image>
          </view>
          <!--					排行榜-->
          <view class="tab-page" v-else-if="currentSelectTab === '排行榜'">
            <image :src="getShowNginxPicUrl('cppD8Tr9rJrdvKsAyy2p.png')" mode="widthFix" class="image"
              @click="() => $uni.navigateTo({ url: '/studyRoom/pages/rank/index' })"></image>
          </view>
        </view>
     <!-- 列表 -->
     <view class="content">
          <view class="activity-list">
            <view class="activity-item" v-for="item in activityList" :key="item.studyActivityId" @click="() =>
        $uni.navigateTo({
          url: handleUrlParams('/studyRoom/pages/activity/detail', {
            studyActivityId: item.studyActivityId,
          }),
        })
        ">
              <!--							活动图片-->
              <image :src="getShowImage(item.activityLogo)" class="activity-logo" v-if="item.activityLogo"></image>
              <!--							活动名称-->
              <view class="activity-name">{{ item.activityName }}</view>
              <!--							活动时长-->
              <view class="activity-duration">
                <image :src="rightIcon" class="icon"></image>
                <view>{{ getActivityDuration(item) }}</view>
              </view>
            </view>
          </view>
        </view>
  </view>
</template>

<script>
import request from "../../../utils/request"
import { getShowImage } from "@/utils"
import { getShowNginxPicUrl } from "@/utils/settings"
import dateUtils from "@/utils/dateUtils"
import moment from "@/lib/moment.min"
import banner from "@/components/banner.vue"
export default {
  computed: {
    // appListRender() {
    //   return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    // },
  },
  components: { banner },
  data() {
    return {
      tabList: ["自习室", "排行榜"],
      currentSelectTab: "排行榜",
      activityList: [], //活动列表
    }
  },
  // 获取活动列表
  onLoad() {
    //获取前3个活动
    request({
      url: "studyActivity/getActivityPage",
      data: {
        current: 1,
        size: 3,
      },
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityList = data.records
    })
  },
  methods: {
    // 获取图片
    getShowImage,
    // nginx图片
    getShowNginxPicUrl,
    // 活动时间处理
    getActivityDuration(item) {
      const durationObj = dateUtils.moment.calculateDateInterval(moment(item.startTime), moment(item.endTime))
      if (durationObj.y > 0) {
        return durationObj.y + "年"
      } else if (durationObj.m > 0) {
        return durationObj.m + "月"
      } else if (durationObj.w > 0) {
        return durationObj.w + "周"
      } else if (durationObj.d > 0) {
        return durationObj.d + "天"
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  //头部
  .content {
    .tab-list {
      display: flex;

      > .tab-item {
        margin-right: 24rpx;
        padding: 6rpx 40rpx;
        font-size: 30rpx;
        background: #d7eee7;
        border-radius: 26rpx;
        color: #2cb980;

        &.active {
          background: white;
          border: 3rpx solid #2cb980;
        }
      }
    }
    .tab-page {
      margin-top: 30rpx;

      > .image {
        border-radius: 20rpx;
        width: 100%;
      }
    }
    .activity-list {
      display: flex;
      margin-top: 30rpx;

      > .activity-item {
        width: 0;
        flex: 1;
        background: #f4f5f7;
        padding: 20rpx 10rpx;
        border-radius: 30rpx;

        &:not(:last-child) {
          margin-right: 50rpx;
        }

        > .activity-logo {
          width: 170rpx;
          height: 109.6rpx;
        }

        > .activity-name {
          margin-top: 20rpx;
          font-size: 30rpx;
          //文本溢出加省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        > .activity-duration {
          margin-top: 10rpx;
          color: #b1581e;
          font-size: 30rpx;
          display: flex;
          align-items: center;

          > .icon {
            width: 13rpx;
            height: 13rpx;
            margin-right: 40rpx;
          }
        }
      }
    }
  }
}
</style>
